import React, { Component } from 'react';

import { Input, Select, Button, Table, Tag, Space, message, Modal, DatePicker, Popconfirm } from 'antd';



import managebox from './index.module.css';


const { Option } = Select;

class ClassList extends Component {
  state = {
    inpValue: '',
    lesson: '全部',
    newlesson: '',
    school: '全部',
    columns: [
      {
        title: '班级名称',
        dataIndex: 'className',
        key: 'className',
        render: text => <a>{text}</a>
      },
      {
        title: '所属学院',
        dataIndex: 'school',
        key: 'school',
      },
      {
        title: '带班讲师',
        dataIndex: 'teacherid',
        key: 'teacherid',
        render: (value) => (
          this.state.userData && this.state.userData.map(item => {
            if (item.userid == value) {
              return item.name
            }
          })

        )
      },
      {
        title: '课程阶段',
        dataIndex: 'course',
        key: 'course',
      },
      {
        title: '开课日期',
        dataIndex: 'startTime',
        key: 'startTime',
        render: (value) => {
          if (value !== '0') {
            return this.getDate(parseInt(value))
          }
          if (value === '0') {
            return '/'
          }
        }
      },
      {
        title: '班级人数',
        dataIndex: 'classType',
        key: 'classType',
      },
      {
        title: '操作',
        key: 'action',
        render: (value, item) => (
          <Space size="middle">
            <a alt="" onClick={() => [this.props.history.push({ pathname: '/home/class/classroom' }), localStorage.classid = item.classid]}>课堂情况</a>
            <a alt="" onClick={() => this.getLocal(value.classid)}>记录</a>
            {
              value.status === 'ok' ? <Tag color="processing" onClick={() => this.showModal(value, value.classid)}>开课</Tag>
                : <Popconfirm title="确定节课？" okText="确定" cancelText="取消" onConfirm={() => this.getEndClass(value.classid)} onCancel={() => this.cancel()}>
                  <Tag color="default">结课</Tag>
                </Popconfirm>

            }
          </Space>
        ),
      },
    ],
    data: [],
    userData: [],
    resData: [],
    lessonData: [],
    arr: [],
    teacherdata: [],
    coachdata: [],
    teacherid: '未选择',
    coachid: '未选择',
    visible: false,
    dateTime: '',
    id: null,
    selectData: []
  }
  getData = (value) => {
    let { resData } = this.state
    this.setState({ school: value })
    if (value === '全部') {
      let allData = []
      resData.forEach(item => item.courseList.forEach(item => {
        allData.push(item)
      }))
      this.setState({ lesson: '全部' })
      this.setState({ lessonData: allData })
      return
    }
    let listData = resData.find(item => item.schoolid === value).courseList
    this.setState({ lesson: listData[0].txt })
    this.setState({ lessonData: listData })
  }
  initData = () => {
    this.$httpReq(this.$api.classList(), res => {
      this.setState({ data: res.data })
    })
  }

  getSearch = () => {
    let { inpValue, school, lesson } = this.state
    this.$httpReq(this.$api.searchClassList({ inpValue, school, course: lesson }), res => {
      let { code, msg } = res
      if (code === 0) {
        message.warning(msg)
        return
      }
      if (code === 1) {
        message.success(msg)
        this.setState({ data: res.data })
      }
    })
  }
  getDate = (timestamp) => {
    const dates = new Date(timestamp).toLocaleDateString();
    return dates
  }
  showModal = (value, id) => {
    let { resData } = this.state
    this.setState({
      visible: true,
    });
    this.setState({ id })
    resData.map((item, index) => {
      if (item.schoolid === value.school) {
        let newselectData = []
        item.courseList.map((jtem, index) => {
          newselectData.push(jtem)
        })
        this.state.newlesson = newselectData[0].txt
        this.setState({ selectData: newselectData })
        return
      }
    })

  };

  handleOk = e => {
    let { dateTime, teacherid, coachid, id, newlesson } = this.state
    this.setState({
      visible: false,
    })

    if (teacherid === '未选择' || coachid === '未选择' || dateTime === '' || newlesson === '') {
      this.setState({
        visible: true,
      })
      message.warning('请将数据补充完整')
      return
    }
    if (dateTime < new Date().getTime()) {
      message.warning('不可小于当前日期')
      return
    }

    this.$httpReq(this.$api.startClass({ classid: id, teacherid: coachid, startTime: dateTime, course: newlesson }), res => {
      if (res.code === 1) {
        message.success(res.msg)
        this.initData()
        return
      }
      if (res.code === 0) return message.error(res.msg)
    })
  };
  handleCancel = e => {

    this.setState({
      visible: false,
    })
  }
  onChange = (date, dateString) => {
    this.setState({ dateTime: new Date(dateString).getTime().toString() })
  }
  getEndClass = (id) => {
    this.$httpReq(this.$api.endClass({ classid: id }), res => {
      if (res.code === 1) {
        message.success(res.msg)
        this.initData()
        return
      }
      if (res.code === 0) return message.error(res.msg)
    })
  }

  cancel = () => {
    message.error('已取消');
  }
  getLocal = (id) => {
    sessionStorage.id = id
    this.props.history.push('/home/class/log')
  }
  render() {
    let { columns, data, school, lesson, resData, lessonData, inpValue, arr, teacherid, coachid, teacherdata, coachdata, selectData, newlesson } = this.state
    return <div className={managebox.B_manageBox}>
      <div className={managebox.B_sel}>
        <div className={managebox.B_antd}>
          <div className={managebox.B_name}>班级/教师名称:</div>
          <div className={managebox.B_inp}><Input placeholder="请输入关键字" style={{ width: 120 }} value={inpValue} onChange={(ev) => this.setState({ inpValue: ev.target.value })} /></div>
        </div>
        <div className={managebox.B_antd}>
          <div className={managebox.B_name}>所属学院:</div>
          <div className={managebox.B_inp}>
            <Select value={school} style={{ width: 120 }} onChange={(value) => this.getData(value)}>
              {

                arr && arr.map((item, index) => {
                  return <Option key={index} value={item}>{item}</Option>
                })
              }
            </Select>

          </div>

        </div>
        <div className={managebox.B_antd}>
          <div className={managebox.B_name}>课程阶段:</div>
          <div className={managebox.B_inp}>
            <Select value={lesson} style={{ width: 120 }} onChange={(value) => this.setState({ lesson: value })}>
              {
                lessonData && lessonData.map((item, index) => {
                  return <Option key={index} value={item.txt}>{item.txt}</Option>
                })
              }
            </Select>

          </div>
        </div>

        <div className={managebox.B_antdtwo}>
          <div className={managebox.B_serch}>
            <Button type="primary" onClick={() => this.getSearch()}>搜索</Button>
          </div>

        </div>
      </div>
      <div className={managebox.B_add}>
        <div className={managebox.B_all}>

          <div className={managebox.B_addname}>
            <a className={managebox.B_a} onClick={() => this.props.history.push('/home/class/addClass')}>添加班级</a>
          </div>
        </div>
      </div>
      <div className={managebox.B_content}>
        <div>
          <Table
            columns={columns}
            dataSource={data}
            pagination={{ pageSize: 6 }}
          />
        </div>
      </div>
      <div>
        <Modal
          title="设定开课"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText="确定"
          cancelText="取消"
        >
          <p>
            <span className={managebox.B_span}>请选择带班讲师:</span>
            <Select value={coachid} onChange={(value) => this.setState({ coachid: value })} style={{ width: 200 }}>
              {
                teacherdata.map((item, index) => {
                  return <Option key={index} value={item.userid}>{item.name}</Option>
                })
              }
            </Select>
          </p>
          <p>
            <span className={managebox.B_span}>请选择带班导员:</span>
            <Select value={teacherid} onChange={(value) => this.setState({ teacherid: value })} style={{ width: 200 }}>
              {
                coachdata.map((item, index) => {
                  return <Option key={index} value={item.userid}>{item.name}</Option>
                })
              }
            </Select>
          </p>
          <p>
            <span className={managebox.B_span}>请选择开课课程:</span>
            <Select value={newlesson} style={{ width: 200 }} onChange={(value) => this.setState({ newlesson: value })}>
              {
                selectData.map((item, index) => {
                  return <Option key={index} value={item.txt}>{item.txt}</Option>
                })
              }
            </Select>
          </p>
          <p>
            <span className={managebox.B_span}>请选择开课日期:</span>
            <DatePicker onChange={this.onChange} style={{ width: 200 }} />
          </p>
        </Modal>
      </div>
    </div>
  }

  componentDidMount() {
    let { resData } = this.state
    let arr = ['全部']
    this.$httpReq(this.$api.getSchoolList(), res => {
      this.setState({ resData: res.data })
      res.data.map(item => {
        arr.push(item.schoolid)
      })
      this.setState({ arr })

    })
    this.initData()
    this.$httpReq(this.$api.userList(), res => {
      this.setState({ userData: res.data })
    })
    this.$httpReq(this.$api.getTeacherList(), res => {
      this.setState({ teacherdata: res.data })
    })
    this.$httpReq(this.$api.getCoachList(), res => {
      this.setState({ coachdata: res.data })
    })

  }
}


export default ClassList